<template>
  <div class="login-box">
    <div>
      <div class="box-header">
        <img class="logo" src="../../../public/logo.svg" alt=""/>
        <div class="box-header-t">管理员登录</div>
      </div>
      <div class="title">花花世界 - 管理员登录</div>
      <a-tabs @change="tabClick" default-active-key="1" :tabBarStyle="{ textAlign: 'center' }">
        <a-tab-pane key="1" tab="密码登陆">
          <a-input
            v-model="loginForm.username"
            size="large"
            style="margin-top: 10px"
            class="input"
            placeholder="用户名">
            <a-icon slot="prefix" type="mail"/>
          </a-input>
          <a-input-password
            v-model="loginForm.password"
            size="large"
            class="input"
            placeholder="密码">
            <a-icon slot="prefix" type="lock"/>
          </a-input-password>
        </a-tab-pane>
        <a-tab-pane key="2" tab="验证码登陆" force-render>
          <a-input
            v-model="emailForm.email"
            size="large"
            style="margin-top: 10px"
            class="input"
            placeholder="邮箱">
            <a-icon slot="prefix" type="mail"/>
          </a-input>
          <div style="display: flex">
            <a-input
              v-model="emailForm.code"
              size="large"
              class="input"
              placeholder="验证码">
              <a-icon slot="prefix" type="safety-certificate"/>
            </a-input>
            <a-button class="code-btn" :loading="sendLoading" @click="sorry()">
              获取验证码
            </a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
      <div style="margin-bottom: 20px">
        <a-checkbox v-model="remember">自动登录</a-checkbox>
        <a-button type="link" style="margin-left: 158px">
          忘记密码 ?
        </a-button>
      </div>
      <a-button :loading="submitLoading" class="submit-btn" type="primary" @click="submitLogin">
        确认登陆
      </a-button>
      <div class="des">花花世界管理系统 ©2023 Created by 软件学院 - Genius</div>
    </div>
  </div>
</template>

<script>
import {login,register} from "@/api/user"
import validate from "../../static/js/formValidate";
import {mapMutations} from "vuex";
export default {

  data() {
    return {
      sendLoading: false,
      submitType: '1', //1账号登录
      submitLoading: false,
      remember: false,
      loginForm: {
        password: '',
        username: '',
      },
      emailForm:{
        email: '',
        code: '',
      },
      loginRules:{
        username:{validate:validate.Rule.isUsername,message:'用户名格式不正确'},
        password:{validate:validate.Rule.isPassword,message:'密码格式不正确'},
      }
    }
  },

  methods: {
    ...mapMutations('user',['setUserInfo']),
    sorry(){
      this.$message.error("还没写的捏!!");
    },
    submitLogin() {
     if(this.submitType === '1'){
       validate.validate(this.loginRules,this.loginForm,this).then((isValidate)=>{
         login(this.loginForm).then(res=>{
           console.log(res)
           if(res.code === 200 ){
             this.setUserInfo(res.data['userInfo'])
             //TODO 鉴权
             localStorage.setItem('token',JSON.stringify(res.data['token']))
             this.$router.push({path:"/admin"})
             this.$message.success("欢迎回来!")
           }else{
             this.$message.error(res.message)
           }
         })
       })
     }else{
       this.sorry();
     }

    },

    tabClick(key) {
      this.submitType = key
    },

  }

}
</script>

<style scoped>

body {
  background: #000000 !important;
}

>>> .ant-tabs-bar {
  border-bottom: none !important;
}

>>> .ant-btn-primary {
  border-color: #5a84fd;
}

.login-box {
  width: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.box-header {
  display: flex;
}

.box-header-t {
  font-weight: bolder;
  font-size: 30px;
}

.logo {
  width: 44px;
  height: 44px;
  margin-right: 20px;
  margin-left: 43px;
}

>>> .ant-tabs-nav {
  width: 350px;
}

>>> .ant-tabs-ink-bar {
  left: 52px;
}

>>> .ant-input-affix-wrapper .ant-input {
  font-size: 12px !important;
}

.title {
  color: #91949c;
  padding-top: 15px;
  padding-bottom: 35px;
  font-size: 13px;
  text-align: center;
}

.input {
  margin-bottom: 25px;
  font-size: 10px;
}

.code-btn {
  height: 40px;
  margin-left: 30px;
}

.submit-btn {
  letter-spacing: 2px;
  background: #5a84fd;
  width: 100%;
  height: 45px;
}

.des {
  padding-top: 25px;
  font-size: 13px;
  text-align: center;
  color: #91949c;
  letter-spacing: 2px;
}
</style>
